I'm trying to append a div element to another div element with JS, but it throws an error:
let SynthVoice = class {
constructor(name){
this.synthPanel = document.createElement("div");
this.synthContainer = document.getElementById("synthChannels"); // div element
this.synthPanel.id = name; // "synth0"
this.synthContainer.appendChild(this.synthPanel);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/synth/overhaul.js"></script>
<link rel="stylesheet" href="/synth/styles.css" />
</head>
<body>
<button id="createSynth" onclick="synth0 = new SynthVoice('synth0')">Create Synth 0</button>
<div id="synthChannels"></div>
</body>
</html>
#synthChannels {
display: flex;
}
TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
All the code shown is in the constructor of the class SynthVoice, of which a new instance is created on the click of a button. Other answers on StackOverflow and MDN say this code should work, but it doesn't -- help!
Edit: Added some additional code so the error can (hopefully) be reproduced more easily